<template>
	<view>
		<uni-popup ref="edit-popup" type="bottom" backgroundColor="rgba(132, 203, 198, 0.75)">
			<view class="edit-popup-layout">
				<view class="textarea-layout">
					<view class="content-top"></view>
					<view class="content-middle">
						<textarea placeholder="用文字寄托对逝者的思念" v-model="content" disable-default-padding maxlength="200"></textarea>
						<text @click.stop="showDefaultPopup()" class="default-text">常用语</text>
					</view>
					<view class="content-bottom"></view>
				</view>
				<view class="submit-btn" @click="addComment()">提交</view>
			</view>
		</uni-popup>
		<uni-popup ref="default-popup" type="bottom" @change="defaultPopupChange" backgroundColor="rgba(132, 203, 198, 0.75)">
			<view class="edit-popup-layout">
				<view class="submit-btn" style="margin-top: 0;">常用语列表</view>
				<scroll-view style="max-height: 560rpx;margin-top: 26.28rpx;" scroll-y>
					<view class="textarea-layout">
						<view class="content-top"></view>
						<view class="content-middle">
							<view class="default-list-item" v-for="(item, index) in defaultList" :key="index">
								{{ item.content }}
								<text @click="useDefault(item)" class="use-text">使用留言</text>
							</view>
						</view>
						<view class="content-bottom"></view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			content: undefined,
			defaultList: []
		};
	},
	props: {
		type: {
			type: Number,
			default: 1
		},
		hallId: {
			type: Number,
			default: 0
		},
		role: {
			type: Number,
			default: 0
		}
	},
	methods: {
		/* 加载常用语 */
		loadDefault() {
			this.$http.get('/comment/default-list').then(res => {
				if (res.code === 200) {
					this.defaultList = res.data;
				}
			});
		},
		/* 显示留言编辑弹窗 */
		showPopup() {
			this.$refs['edit-popup'].open();
		},
		/* 显示常用语弹窗 */
		showDefaultPopup() {
			this.$refs['default-popup'].open();
			this.$refs['edit-popup'].close();
		},
		/* 常用语弹窗监听 */

		defaultPopupChange(e) {
			if (!e.show) {
				this.$refs['edit-popup'].open();
			}
		},
		/* 使用常用语 */
		useDefault(item) {
			this.$refs['default-popup'].close();
			this.content = item.content;
		},
		/* 添加留言 */
		addComment() {
			if (!uni.getStorageSync('Authorization')) {
				uni.navigateTo({
					url: '/pages/auth/auth-user'
				});
				return;
			}
			if (this.content == null || this.content.trim() == '') {
				this.content = '';
				uni.showToast({
					icon: 'none',
					title: '请输入留言'
				});
				return;
			}
			let url = '';
			let param = {
				content: this.content,
				status: this.role == 1 ? 1 : 0
			};
			if (this.type == 1) {
				url = '/comment';
				param.hallId = this.hallId;
			} else {
				url = '/ancestral-hall/comment';
				param.ancestralHallId = this.hallId;
			}
			this.$debounce.debounce({
				key: 'addComment',
				time: 3000,
				success: () => {
					this.$http.postJson(url, param).then(res => {
						if (res.code === 200) {
							uni.showToast({
								icon: 'none',
								title: '发表成功' + (this.role == 1 ? '' : '，待管理员审核')
							});
							this.$emit('onPublishSuccess');
							this.$refs['edit-popup'].close();
							this.content = '';
						}
					});
				}
			});
		}
	},
	mounted() {
		this.loadDefault();
	}
};
</script>

<style lang="scss" scoped>
@import './popup.scss';
</style>
